{extend name="index/iframe" /}

{block name="content"}
<form class="layui-form" action="" style="padding-top:10px; padding-right:10px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">游戏名称</label>
            <div class="layui-input-inline">
                <input type="text" name="app_name" lay-verify="required" placeholder="请输入游戏名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">游戏属性</label>
            <div class="layui-input-inline">
                <select name="app_class_id" lay-filter="app_class_id" id="app_class_id" lay-verify="required">
                    <option value="">请选择游戏属性</option>
                    {volist name="$app_class_id" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">游戏标签</label>
            <div class="layui-input-inline">
                <input type="text" name="tags" value="" id="game_tags" lay-verify="required" placeholder="游戏标签" autocomplete="off" class="layui-input">
                <div id="game_tags_box" switch="off">
                    {volist name="app_tag_id" id="vo"}<button class="layui-btn layui-btn-sm game_tags_btn" value="{$vo.id}" switch="off">{$vo.name}</button>{/volist}
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">游戏语言</label>
            <div class="layui-input-inline">
                <input type="text" name="language" value="中文" id="language" lay-verify="required" placeholder="游戏语言" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">游戏简介</label>
        <div class="layui-input-block">
            <textarea id="introduction" rows="6" name="introduction" class="layui-textarea" placeholder="请输入游戏简介"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">游戏内容</label>
        <div class="layui-input-block">
            {MyTag:umditor name="content" content="" height="300px" /}
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn my-btn" lay-submit="" lay-filter="submitBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}

{block name="css"}
<style>
    #game_tags_box {display: none; width: 427px; height: 170px; background: #fff; border: 1px solid #D2D2D2; z-index: 10000; position: absolute; left: 0; top: 42px; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box; padding: 5px; margin-right: -5px;}
    .game_tags_btn {background: #ccc;margin: 3px 5px 3px 0px;}
    .layui-form-selected dl {z-index:10000;}
</style>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'laydate', 'element', 'upload'], function(){
        var form = layui.form
            ,$ = layui.$
            ,layer = layui.layer;

        //点击游戏标签，出现标签选择
        $('#game_tags').click(function(){
            if( $("#game_tags_box").attr("switch") == "off" ){
                $("#game_tags_box").fadeIn(200);
                $("#game_tags_box").attr("switch","on");
            }else{
                $("#game_tags_box").fadeOut(200);
                $("#game_tags_box").attr("switch","off");
            }
        })

        //点击标签，加入样式
        $('.game_tags_btn').click(function(){
            if( $(this).attr('switch') == 'off' ){
                var val = $('#game_tags').val();
                val = val=='' ? $(this).text() : val + ',' + $(this).text();
                $('#game_tags').val(val);
                $(this).addClass('my-btn');
                $(this).attr('switch', 'on');
            }else{
                var val = ',' + $('#game_tags').val();
                val = val.replace(',' + $(this).text(), "");
                $('#game_tags').val(val.substr(1,val.length));
                $(this).removeClass('my-btn');
                $(this).attr('switch', 'off');
            }
            return false;
        });

        //点击文档，隐藏标签
        $(document).bind("click",function(e){
            var target  = $(e.target);
            if(target.closest("#game_tags_box,#game_tags").length == 0){
                $("#game_tags_box").fadeOut(200);
                $("#game_tags_box").attr("switch","off");
            };
            e.stopPropagation();
        });

        //提交
        form.on('submit(submitBtn)', function(data){
            var load = layer.load();
            $.post('{:url("GameList/appAdd")}',data.field, function(json){
                layer.close(load);
                json.code==0 ? layer.msg(json.msg, {icon: 1, time: 1000}) : layer.msg(json.msg, {icon: 0, time: 1000});
            }, 'JSON').error(function(){
                layer.close(load);
                layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
            });
            return false;
        });
    });
</script>
{/block}